/**
 * 火花分镜配置对话框
 * 用于配置视频参数（时长、风格）
 */

import React, { useState } from 'react'
import { Modal, Form, Slider, Radio, Space, Typography, Divider } from 'antd'
import {
  SparkStoryboardConfig,
  VideoStyle,
  VIDEO_STYLE_LABELS,
  VIDEO_STYLE_DESCRIPTIONS
} from '../../../types/sparkStoryboard'

const { Text, Title } = Typography

export interface SparkStoryboardConfigDialogProps {
  visible: boolean
  articleId: string
  articleTitle: string
  wordCount: number
  onSubmit: (config: SparkStoryboardConfig) => void
  onCancel: () => void
}

export const SparkStoryboardConfigDialog: React.FC<SparkStoryboardConfigDialogProps> = ({
  visible,
  articleId,
  articleTitle,
  wordCount,
  onSubmit,
  onCancel
}) => {
  const [form] = Form.useForm()
  const [targetDuration, setTargetDuration] = useState(60)
  const [videoStyle, setVideoStyle] = useState<VideoStyle>(VideoStyle.DYNAMIC)

  const handleOk = () => {
    form.validateFields().then(values => {
      const config: SparkStoryboardConfig = {
        targetDuration: values.targetDuration,
        videoStyle: values.videoStyle,
        articleId,
        articleTitle
      }
      onSubmit(config)
    })
  }

  const handleCancel = () => {
    // 重置表单
    form.resetFields()
    setTargetDuration(60)
    setVideoStyle(VideoStyle.DYNAMIC)
    onCancel()
  }

  return (
    <Modal
      title="转为分镜"
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      width={600}
      okText="开始生成"
      cancelText="取消"
    >
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 文章信息 */}
        <div>
          <Text type="secondary">文章标题：</Text>
          <Title level={5} style={{ margin: '8px 0' }}>{articleTitle}</Title>
          <Text type="secondary">文章字数：{wordCount} 字</Text>
        </div>

        <Divider style={{ margin: '12px 0' }} />

        {/* 配置表单 */}
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            targetDuration: 60,
            videoStyle: VideoStyle.DYNAMIC
          }}
        >
          {/* 视频时长 */}
          <Form.Item
            label="视频时长（秒）"
            name="targetDuration"
            rules={[{ required: true, message: '请设置视频时长' }]}
          >
            <Slider
              min={15}
              max={300}
              value={targetDuration}
              onChange={(value) => setTargetDuration(value)}
              marks={{
                15: '15秒',
                60: '1分钟',
                120: '2分钟',
                180: '3分钟',
                300: '5分钟'
              }}
              tooltip={{
                formatter: (value) => `${value}秒`
              }}
            />
          </Form.Item>

          <div style={{ marginBottom: 24, textAlign: 'center' }}>
            <Text strong style={{ fontSize: 18 }}>
              {targetDuration}秒
            </Text>
            <Text type="secondary" style={{ marginLeft: 8 }}>
              ({Math.floor(targetDuration / 60)}分{targetDuration % 60}秒)
            </Text>
          </div>

          {/* 视频风格 */}
          <Form.Item
            label="视频风格"
            name="videoStyle"
            rules={[{ required: true, message: '请选择视频风格' }]}
          >
            <Radio.Group
              value={videoStyle}
              onChange={(e) => setVideoStyle(e.target.value)}
              style={{ width: '100%' }}
            >
              <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                {Object.values(VideoStyle).map((style) => (
                  <Radio key={style} value={style} style={{ width: '100%' }}>
                    <div>
                      <div>
                        <Text strong>{VIDEO_STYLE_LABELS[style]}</Text>
                      </div>
                      <div>
                        <Text type="secondary" style={{ fontSize: 12 }}>
                          {VIDEO_STYLE_DESCRIPTIONS[style]}
                        </Text>
                      </div>
                    </div>
                  </Radio>
                ))}
              </Space>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Space>
    </Modal>
  )
}
